<template>
  <div class="comment-count">
    <div class="avatar">
      <img :src="data.avatar" alt="" />
      <div>
        <p>{{data.userName}}<span :class="{lv1:data.userLevel>5,lv2:data.userLevel>12}">Lv.9</span></p>
        <span>{{Zindex+1}}楼</span> <span>{{data.NowTime|Time}}</span>
      </div>
    </div>
    <div class="text">
      <div v-html="data.comment">

      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:['Cdata','Zindex'],
  data() {
    return {
      data: this.Cdata,
      floolNum:this.Zindex
    }
  },
  filters:{
    Time(value){
      let newT = Date.now()
      let time = newT - value
      let oldT = new Date(value)
      console.log(time)
      if(time<1000) return '刚刚'
      if(time<1000&&time<60*60*1000) return `${parseInt(time/1000/60)}分钟前`
      if(time>60*60*1000 &&time<24*60*60*1000)return `${parseInt(time/1000/60/60)+1}小时前`
      if(time>24*60*60*1000){
        let m = oldT.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      let d = oldT.getDate();
      d = d < 10 ? "0" + d : d;
      return `${m}-${d}`;
      }
    }
  },
};
</script>

<style scoped>
.comment-count{
padding: 50px;
border-radius: 10px;
border-top: 1px solid rgba(24, 24, 24, 0.1); 
 box-shadow: 0px 4px 4px rgba(24, 24, 24, 0.1); 
}
.avatar{
  display: flex;
  font-size: 14px;
  align-items: center;
}
.avatar img{
  width: 50px;
  border-radius: 100%;
  margin-right: 6px;
}
.avatar>div>p>span{
  font-size: 12px;
  box-sizing: border-box;
  margin-left:5px;
  margin-right:8px;
  background: #4CC3FF;
  color: #fff;
  transform: scale(0.2);  
}
.avatar>div>span{
  margin-top: 4px;
  color: #999;
}
.text{
  padding: 20px;
}
.lv1{
  background: #969CF2;
}
.lv2{
  background: #FFBF00;
}
.text pre{
  white-space:pre-wrap;
}
</style>